import React, {Component} from 'react';
import Header from "./components/Header";
import './App.css'
import List from "./components/List";
import Footer from "./components/Footer";

class App extends Component {

    //状态在哪里，操作状态的方法就是在哪里
    state = {
        todos: [
            {id: '1', name: '吃饭', done: true},
            {id: '2', name: '睡觉', done: true},
            {id: '3', name: '玩游戏', done: false},
            {id: '4', name: 'LOL', done: false}
        ]
    }

    //addTodo用于添加一个todo，接收参数就是todo对象
    addTodo = (todoObj) => {
        //获取原todos
        let {todos} = this.state
        //追加一个
        let newTodos = [todoObj, ...todos]
        this.setState({
            todos: newTodos
        })
    }
    //更新单个todo
    changeTodo = (id, done) => {
        let {todos} = this.state;
        let newTodos = todos.map((todo) => {
            if (todo.id === id) {
                return {...todo, done}
            } else {
                return todo
            }
        })
        this.setState({
            todos: newTodos
        })
    }

    //删除todo
    deleteTodo = (id) => {
        let {todos} = this.state;
        let newTodos = todos.filter((todo) => {
            return todo.id !== id
        })
        this.setState({
            todos: newTodos
        })
    }

    //全选
    handCheckAll = (done) => {
        let {todos} = this.state
        let newTodos = todos.map((todo) => {
            return {...todo, done}
        })
        this.setState({
            todos: newTodos
        })
    }

    //清除已经完成的
    clearAll = () => {
        let {todos} = this.state
        let newTodos = todos.filter((todo) => {
            return !todo.done
        })
        this.setState({
            todos: newTodos
        })
    }


    render() {
        let {todos} = this.state;
        return (
            <div className="todo-container">
                <div className="todo-wrap">
                    <Header addTodo={this.addTodo}/>
                    <List todos={todos} changeTodo={this.changeTodo} deleteTodo={this.deleteTodo}/>
                    <Footer handCheckAll={this.handCheckAll}
                            clearAll={this.clearAll} todos={todos}/>
                </div>
            </div>
        );
    }

}

export default App;